<template>
    <el-aside class="tab-menu" width="170px" style="background: white;">
        <!-- default-active="offer" -->
        <el-menu
                :router="true"
                :default-openeds="['sidebar-'+defaultOpeneds]"
                :default-active="'sidebar-'+activeIndex"
                :unique-opened= "true"
                @select="selectMethods"
        >
            <template v-for="(item, index) in menuList">
                <template v-if="item.listFun.length">
                    <el-sub-menu :index="'sidebar-'+index">
                        <template #title>
                            <!-- <i class="el-icon-s-order"></i> -->
                            <span >
                              {{item.name}}
                            </span>
                        </template>
                        <template v-for="(subItem, subIndex) in item.listFun">
                            <el-menu-item  :index="'sidebar-'+index+'-'+subIndex" :route="subItem.url">
                                <span >
                                    {{subItem.name}}
                                </span>
                            </el-menu-item>
                        </template>
                    </el-sub-menu>
                </template>
                <template v-else>
                    <el-menu-item
                            :key="index"
                            :index="'sidebar-'+index"
                            :route="item.url">
                        <i class="el-icon-s-order"></i>
                        <span >
                    {{item.name}}
                </span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>

    </el-aside>
</template>

<script setup lang="ts">
    import {ref,reactive,onMounted,watch} from "vue"
    import { useDataStore } from '@/store/data';
    import {storeToRefs} from "pinia";
    import {useRouter} from "vue-router";
    const dataStore=useDataStore();
    const {tabMenu,username,getTabMenu}=storeToRefs(dataStore)
    // const menuList:any=dataStore.$patch(state=>{
    //     state.tabMenu=menuList
    // })
    const menuList=dataStore.getTabMenu.tabMenu
    const router=useRouter()
    // const isCollapse=ref(false)
    // const activeIndex=ref(0)
    const temp:Interface=reactive({
        isCollapse:false,
        activeIndex:0,
        defaultOpeneds:0,
    })
    const indexs:object=reactive({})

    onMounted(()=>{
        if(dataStore.tabMenu[0].url=='offer'||dataStore.tabMenu[0].url=='recycleNew') {
            temp.activeIndex= 0
        } else {
            temp.activeIndex= '0-0'
        }
        getActiveIndex(router.currentRoute.value);
    })
    const getActiveIndex=(newData:any)=>{
        if(dataStore.tabMenu[0].url=='recycleNew') {
            menuList.forEach(function(item,index){
                if(item.url==newData.split('/')[1]){
                    temp.activeIndex= index;
                }
            })
        }
    }
    watch(router.currentRoute.value,(newData,oldData)=>{
        if(newData){
            getActiveIndex(newData)
        }
    })
</script>

<style scoped>

</style>
